<template>
  <!-- Form -->
  <el-button type="success" @click="dialogFormVisible = true">
    增加教练
  </el-button>

  <el-dialog v-model="dialogFormVisible" title="添加教练">
    <div class="addcoach">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <p>教练信息</p>
        <el-form-item label="教练姓名" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入教练姓名" />
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="ruleForm.phone" placeholder="请输入手机号码" />
        </el-form-item>
        <el-form-item label="所在校区" prop="area">
          <el-select v-model="ruleForm.area" placeholder="请选择校区">
            <el-option label="胜利驾校" value="shengli" />
          </el-select>
        </el-form-item>

        <p>培训信息</p>

        <el-row>
          <el-col :span="12">
            <el-form-item label="教学科目" prop="subject">
              <el-select v-model="ruleForm.subject" placeholder="选择科目">
                <el-option label="科目一" value="sub1" />
                <el-option label="科目二" value="sub2" />
                <el-option label="科目三" value="sub3" />
                <el-option label="科目四" value="sub4" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="等级" prop="lavel">
              <el-select v-model="ruleForm.level" placeholder="选择教练等级">
                <el-option label="铜牌教练" value="lv1" />
                <el-option label="银牌教练" value="lv2" />
                <el-option label="金牌教练" value="lv3" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="入职时间" prop="time">
              <el-date-picker
                v-model="ruleForm.time"
                type="date"
                placeholder="选择时间"
                clearable
              />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="10">
            <el-form-item label="通过率" prop="PassRate">
              <el-input v-model="ruleForm.PassRate" placeholder="输入百分比" />
            </el-form-item>
          </el-col> -->
        </el-row>

        <el-form-item label="教练简介" prop="coachintro">
          <el-input
            v-model="ruleForm.coachintro"
            type="textarea"
            placeholder="请输入教练简介内容和描述文字"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            添加
          </el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          Confirm
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
// dailog
import { reactive, ref } from "vue";
import { coachPost } from "../../../api/coachmange";
import { ElMessage } from "element-plus";
const dialogFormVisible = ref(false);
// Form
import type { FormInstance, FormRules } from "element-plus";

interface RuleForm {
  name: string;
  phone: string;
  area: string;
  level: string;
  time: string;
  coachintro: string;
  subject: string;
  coachType: string;
  PassRate: number;
}

const formSize = ref('default')
const ruleFormRef = ref<any>()
const ruleForm = reactive<any>({
    name: '',
    phone: '',
    area: '',
    level: '',
    time: '',
    subject: '',
    coachintro: '',
    coachType:'',
})
// 规则
const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: "请输入教练姓名", trigger: "blur" },
    // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
  area: [{ required: true, message: "请选择校区", trigger: "blur" }],
  subject: [{ required: true, message: "请选择教学科目", trigger: "blur" }],
  level: [{ required: true, message: "请选择教练等级", trigger: "blur" }],
  time: [{ required: true, message: "请选择入职时间", trigger: "blur" }],
  coachintro: [{ required: true, message: "请输入教练简介", trigger: "blur" }],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      console.log("输入了的值", ruleForm);

      coachPost(ruleForm).then(() => {
        ElMessage({
          message: "Congrats, this is a success message.",
          type: "success",
        });
        dialogFormVisible.value = false;
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>
<style scoped>
.el-button--text {
  margin-right: 15px;
}

.el-select {
  width: 300px;
}

.el-input {
  width: 300px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

/* 添加教练 */
</style>